.svg-icon {
	display: block;
	width: 100%;
	height: 100%;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	overflow: hidden;
	backface-visibility: hidden;

	&--small {
		width: 18px;
		height: 18px;
	}

	&--large {
		width: 34px;
		height: 34px;
	}
}

.icon {
	display: block;
	width: $icon-size;
	height: $icon-size;

	&--small {
		width: $icon-small-size;
		height: $icon-small-size;
	}

	&--medium {
		width: $icon-medium-size;
		height: $icon-medium-size;
	}

	&--large {
		width: $icon-large-size;
		height: $icon-large-size;
	}

	&--xlarge {
		width: $icon-xlarge-size;
		height: $icon-xlarge-size;
	}
}
